<template>
  <h2>TableFilter</h2>
  <p>
    本组件在 table-base 的基础上实现。本组件主要重写了新的筛选效果，不使用element-ui的筛选效果。
  </p>
  <p>
    本组件的 columns 中的 filters 和 filterMethod 不会传递给 table-base
    组件，因此不会显示默认的筛选。
  </p>
  <p>本组件的 data 属性变更会清空过滤条件。另外也暴露了 clearFilter 方法用于手动清空过滤条件。</p>
  <h3>TableFilter 属性</h3>
  <table-info type="props" :data="propsTable"></table-info>
  <h3>TableFilter Columns属性</h3>
  <p>columns 属性同 table-base。</p>
  <h3>TableFilter Slot</h3>
  <table-info type="slot" :data="slotTable"></table-info>
  <p>因为筛选效果直接支持多选，所以 filterMethod 的 value 参数是一个数组，表示选中的项。</p>
  <h3>案例</h3>
  <code-demo :code="htmlCode" :scriptCode="scriptCode">
    <el-button @click="() => tableRef.clearFilters()">清空过滤条件</el-button>
    <table-filter
      style="margin-top: 20px"
      ref="tableRef"
      :data="data"
      :columns="columns"
    ></table-filter>
  </code-demo>
</template>

<script setup>
import { ref } from 'vue'

// prettier-ignore
const data = [
  { date: '2016-05-02', name: 'wangxiaohu', address: 'No. 189, Grove St, Los Angeles', },
  { date: '2016-05-04', name: 'wangxiaohu', address: 'No. 189, Grove St, Los Angeles', },
  { date: '2016-05-01', name: 'wangxiaohu', address: 'No. 189, Grove St, Los Angeles', },
  { date: '2016-05-03', name: 'wangxiaohu', address: 'No. 189, Grove St, Los Angeles', },
]

const columns = [
  { label: '股东名称', prop: 'name', align: 'left' },
  {
    label: '入股日期',
    prop: 'date',
    filters: [
      { text: '2016-05-01', value: '2016-05-01' },
      { text: '2016-05-02', value: '2016-05-02' },
      { text: '2016-05-10', value: '2016-05-10' },
    ],
    filterMethod(value, row) {
      return value.indexOf(row.date) >= 0
    },
  },
  { label: '住址', prop: 'address' },
]

const tableRef = ref()

const htmlCode = `<el-button @click="() => tableRef.clearFilters()">清空过滤条件</el-button>
<table-filter
  style="margin-top: 20px"
  ref="tableRef"
  :data="data"
  :columns="columns"
></table-filter>`

const scriptCode = `const data = [
  { date: '2016-05-02', name: 'wangxiaohu', address: 'No. 189, Grove St, Los Angeles', },
  { date: '2016-05-04', name: 'wangxiaohu', address: 'No. 189, Grove St, Los Angeles', },
  { date: '2016-05-01', name: 'wangxiaohu', address: 'No. 189, Grove St, Los Angeles', },
  { date: '2016-05-03', name: 'wangxiaohu', address: 'No. 189, Grove St, Los Angeles', },
]

const columns = [
  { label: '股东名称', prop: 'name', align: 'left' },
  {
    label: '入股日期',
    prop: 'date',
    filters: [
      { text: '2016-05-01', value: '2016-05-01' },
      { text: '2016-05-02', value: '2016-05-02' },
      { text: '2016-05-10', value: '2016-05-10' },
    ],
    filterMethod(value, row) {
      return value.indexOf(row.date) >= 0
    },
  },
  { label: '住址', prop: 'address' },
]

const tableRef = ref()`

const propsTable = [
  {
    name: 'columns',
    desc: '列配置，同 table-base。',
    type: 'Array<{ label: string, prop: string, width?: string || number, minWidth?: string || number, formatter?: Function(row, column, cellValue), align?: string, isTh?: boolean, labelSlot?: string, valueSlot?: string }>',
  },
  { name: 'data', desc: '数据内容。同 element-plus 的配置。', type: 'Array<Object>' },
]

const slotTable = [
  {name: 'empty', desc: '空数据时的插槽'}
]
</script>
